<template>
    <div id="ang">
        <div id="jiben">
            <span id="shou" @click="btnClick" class="fa fa-chevron-left "></span>
            <span id="jb"> 基本信息</span>
            <span id="dian" 
             @click="tanChu=!tanChu"
            class="fa  fa-ellipsis-h"
            ></span>

        </div >
        <div id="ov" v-show="tanChu">
            <span id="aa" class="fa  fa-home" @click="homeClick"> 首 页</span>
            <hr>
            <span id="aa" class="fa fa-bars" @click="fenleiClick"> 分 类</span>
            <hr>
            <span id="aa" class="fa  fa-user-circle" @click="woClick"> 我的文轩</span>

        </div>

        <div id="im">
            <img :src="wares.img[0]">
        </div>
        <div id="bei">
            <p id="nn">书名:{{wares.name}}</p>
            <div id="jiaq">
                <span id="qian">￥{{wares.price}}</span>
                <span id="sale">{{wares.sale}} 折</span>
                <span class="fa fa-share-alt " id="fx"></span>
            </div>
        </div>
        <div id="zuozhe">
            <p id="ze">作者：{{wares.author}} 著</p>
            <span id="cbs">出版社：{{wares.press}}</span>
        </div>
        <div id="f1">
            <span id="tubiao" class="fa  fa-check-circle "></span>
            <span id="xianhuo">文轩现货</span>
            <span>70%城市次日达，电子发票</span>
        </div>
        <div id="man">
        </div>
        <div class="jian">
            <span class="manjian">满 减</span>
            <span class="haoshu">♥好书惠♥图书音像满66减30，满100减30!(特惠图书、电子书、百货除外)</span>
        </div>
        <div class="jian">
            <span class="manjian">满 减</span>
            <span class="haoshu">♥好书惠♥图书音像满66减30，满100减30!(特惠图书、电子书、百货除外)</span>
        </div>

        <!--<Gouwu></Gouwu>-->

        <div id="box">
            <span class="fa fa-home" @click="homeClick">
             <p class="ppp" >首页</p>
         </span>
            <span class="fa fa-heart-o">
            <p class="ppp">收藏</p>
        </span>
            <span class="fa fa-cart-plus" @click=gouwuClick>
            <p class="ppp">购物车</p>
        </span>
            <div id="bo">
                <span>立即购买</span>
            </div>
            <div id="ox">
                <span @click="add">加入购物车</span>
            </div>
        </div>

    </div>


    </div>
</template>

<script>
    import { mapState } from 'vuex'
    // import Gouwu from '@/components/gouwu.vue'
    export default {
        computed: {
            ...mapState([
                "islogin"
            ]),
            id: function () {
                return this.$route.params.id
            }
        },

        components: {

            // Gouwu,
        },

        data: function () {
            return {
                wares: [],
                tanChu:false,
            }
        },


        methods: {
            
            //  详情列表请求
            xiangqing: function () {
                this.http.post("api/users/xiangqing", { id: this.id })
                    .then(res => {
                        res.data.goods
                        this.wares = res.data.goods
                    })
            },

            // 添加购物车请求

            add: function (e) {
                if (this.islogin) {

                    var gouwu = {
                        id: this.wares._id,
                        img: this.wares.img,
                        name: this.wares.name,
                        price: this.wares.price,
                        author: this.wares.author,
                        press: this.wares.press,
                        check: true,
                    }
                    // console.log(gouwu)
                    this.http.post("api/users/trade", gouwu)
                        .then(res => {
                            alert("添加购物车成功")
                        })
                } else {
                    alert("您还没登录 请先登录")
                }

            },


            fenleiClick:function(){
                location.href = "#/Paging"
            },
            woClick:function(){
                location.href = "#/Corridors"
            },

            btnClick: function () {
                history.back("")
                // location.href="#/"
            },
            homeClick: function () {
                location.href = "#/"
            },
            gouwuClick: function () {
                location.href = "#/Shopping"
            }
        },
        mounted: function () {
            this.xiangqing();
        }

    }

</script>

<style scoped>
    #aa{
        padding: 3px;
        font-size: 16px;
        color: #cccccc;
    }
    #ov {
        /*padding: 5px;*/
        cursor: pointer;
        color: #eeeeee;
        /*font-size: 13px;*/
        position: absolute;
        right: 0;
        top: 8vw;
        margin: 4vw;
        width:35vw;
        height: 25vh;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 3vw;
    }


    #box {
        cursor: pointer;
        background-color: white;
        width: 100%;
        height: 50px;
        position: fixed;
        position: absolute;
        left: 0;
        bottom: 70px;
        border-top: solid 1px #cccccc;
    }

    #bo {
        background-color: red;
        width: 100px;
        height: 50px;
        position: absolute;
        right: 0;
        bottom: 0;
        text-align: center;
        line-height: 50px;
        color: white;
        font-size: 15px;
    }

    #ox {
        background-color: #333333;
        width: 100px;
        height: 50px;
        position: absolute;
        right: 100px;
        bottom: 0px;
        text-align: center;
        line-height: 50px;
        color: white;
        font-size: 15px;
    }

    .fa {
        color: #6B7274;
        font-size: 25px;
        /*position: absolute;*/
        margin-left: 20px;
        line-height: 25px;
        margin-top: 5px;
    }

    .ppp {
        font-size: 12px;
        margin: 0;
        color: #333333;
    }






    #app {
        overflow: hidden;
    }

    #ang {
        width: 100vw;
        overflow: hidden;
        height: calc(100vh - 130px);
        overflow-y: scroll;
        background-color: #eeeeee;
        z-index: 100;
    }

    #jiben {
        width: 100%;
        position: fixed;
        line-height: 6vh;
        text-align: center;
        height: 6vh;
        background-color: white;
    }

    #shou {
        float: left;
        padding-top: 2vh;
        cursor: pointer;
        padding-left: 8px;
        font-size: 16px;
        color: red;
    }

    #dian {
        /*position: relative;*/
        float: right;
        line-height: 6vh;
        padding-right: 5vw;
        font-size: 20px;
        color: #999999;
    }

    #im {
        background-color: white;
        text-align: center;
        padding-top: 7vh;
        border-bottom: solid 1px #eeeeee;
    }

    img {

        width: 40vh;
        height: 40vh;
    }

    #nn {
        padding-left: 5vw;
        font-size: 14px;
        color: #333;
    }

    #jiaq {

        text-align: center;
    }

    #bei {
        height: 20vw;
        background-color: white;
        border-bottom: solid 1px #eeeeee;
    }

    #qian {
        float: left;
        padding-left: 5vw;
        font-size: 20px;
        color: red;
    }

    #fx {
        float: right;
        padding-right: 5vw;
        font-size: 25px;
        color: red;
    }

    #sale {
        background-color: #FD5969;
        font-size: 10px;
        border-radius: 4px;
        color: white;
    }

    #zuozhe {
        font-size: 13px;
        width: 100vw;
        background-color: white;
        /*padding-right: 20px;*/
        float: left;
        height: 18vw;
        border-bottom: solid 1px #eeeeee;
    }

    #ze {
        color: #666;
        font-size: 12px;
        margin: 10px;
    }

    #cbs {
        color: #666;
        font-size: 12px;
        padding-left: 10px;
    }

    #f1 {
        text-align: center;
        margin: 8px;
        padding-top: 10px;
        height: 30px;
        width: 100%;
        background-color: red;
        font-size: 10px;
        color: #666;
    }

    #tubiao {

        /*padding-right: 40vw;*/
        margin: 6px;
        float: left;
        font-size: 18px;
        color: red;
    }

    #xianhuo {
        font-size: 16px;
        color: #333;
    }

    #man {
        background-color: #FAFAFA;
        height: 40px;
        border-bottom: solid 1px #eeeeee;
        padding-bottom: 10px;
    }

    .jian {
        background-color: white;
        height: 40px;
        border-bottom: solid 1px #eeeeee;
    }

    .manjian {
        /*padding-top: 50px;*/
        border-radius: 5px;
        font-size: 13px;
        margin: 20px;
        border: solid 1px red;
    }

    .haoshu {
        font-size: 12px;
        color: #666;
    }
</style>